<template>
  <div class="app-container">
    <div class="filter-container">
      <el-select
        v-model="schoolId"
        placeholder="请选择所属院校"
        clearable
        size="medium"
        @change="selectChange()"
      >
        <el-option
          v-for="it in schoolList"
          :key="it.id"
          :label="it.name"
          :value="it.id"
        ></el-option>
      </el-select>
      <el-select
        v-model="status"
        placeholder="请选择查询状态"
        @change="selectChange()"
      >
        <el-option label="全部" value="0"></el-option>
        <el-option label="已认证" value="1"></el-option>
        <el-option label="未认证" value="2"></el-option>
        <el-option label="禁封用户" value="3"></el-option>
        <el-option label="虚拟用户" value="4"></el-option>
        <el-option label="申请认证中用户" value="5"></el-option>
      </el-select>
      <el-button
        class="filter-item"
        type="primary"
        size="small"
        icon="el-icon-circle-plus"
        @click="$router.push(add_url)"
        >添加虚拟用户</el-button
      >
    </div>
    <el-table
      :data="tableData"
      v-loading="loadList"
      element-loading-text="拼命加载中..."
      border
    >
    <el-table-column prop="id" label="id"></el-table-column>
      <el-table-column prop="applyStatus" label="用户状态">
        <template slot-scope="scope">
          <span>{{
            scope.row.applyStatus == 0
              ? "未认证"
              : scope.row.applyStatus == 2
              ? "已认证"
              : "申请认证中"
          }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="ban" label="封禁状态">
        <template slot-scope="scope">
          <span>{{ scope.row.ban == 0 ? "未封禁" : "已封禁" }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="nickname" label="昵称"></el-table-column>
      <el-table-column prop="signature" label="个性签名"></el-table-column>
      <el-table-column prop="auth.stuId" label="学号"></el-table-column>
      <el-table-column prop="balance" label="余额"></el-table-column>
      <el-table-column prop="jifen" label="积分"></el-table-column>
      <el-table-column
        prop="idNumber"
        label="身份证号吗"
        v-if="status == 0 || status != 4"
      ></el-table-column>
      <el-table-column prop="count" label="申请次数"></el-table-column>
      <el-table-column
        prop="ban"
        label="申请认证日期"
        v-if="status == 0 || status != 4"
      ></el-table-column>
      <el-table-column prop="sex" label="性别">
        <template slot-scope="scope">
          <span>{{ scope.row.sex == 1 ? "男" : "女" }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="identity"
        label="身份"
        v-if="status == 0 || status != 4"
      >
        <template slot-scope="scope">
          <span>{{
            scope.row.identity == 1
              ? "本科"
              : scope.row.identity == 2
              ? "硕士"
              : "博士"
          }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="schoolId" label="院校">
        <template slot-scope="scope">
          <span>{{ findSchool(scope.row.schoolId).name }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="avatar" label="头像">
        <template slot-scope="scope">
          <img :src="scope.row.avatar" style="width: 50px; height: auto" />
        </template>
      </el-table-column>
      <!-- <el-table-column prop="backGroundUrl" label="背景图">
        <template slot-scope="scope">
          <img
            :src="scope.row.backGroundUrl"
            style="width: 50px; height: auto"
          />
        </template>
      </el-table-column> -->

      <el-table-column label="操作" width="200">
        <template slot-scope="scope">
          <el-button size="mini" @click="edit(scope.row)">编辑</el-button>
          <!-- 假学生才可以删除 -->
          <el-button
            v-if="status == 4"
            size="mini"
            type="danger"
            @click="del(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div v-show="!loadList" class="pagination-container">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[10, 20, 50, 100, 200]"
        :page-size="pageSize"
        layout="total, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>

    <el-dialog title="修改" :visible.sync="dialogVisible" width="70%">
      <div class="filter-container">
        <el-select
          v-model="cardId"
          placeholder="请选择置顶卡"
          clearable
          size="medium"
        >
          <el-option
            v-for="it in cardList"
            :key="it.id"
            :label="it.cardName"
            :value="it.id"
          ></el-option>
        </el-select>

        <el-button
          class="filter-item"
          type="primary"
          size="small"
          icon="el-icon-circle-plus"
          @click="addUserCard(cardId, item.id)"
          >添加置顶卡</el-button
        >
      </div>

      <el-table
        :data="item.cardList"
        v-loading="loadList"
        element-loading-text="拼命加载中..."
        border
      >
        <el-table-column prop="cardName" label="置顶卡名称"></el-table-column>
        <el-table-column prop="cardNum" label="置顶卡数量"></el-table-column>
        <el-table-column label="操作" width="300">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="danger"
              @click="subUserCard(scope.row.topCardId, item.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div style="height: 20px"></div>
      <el-form :model="item" ref="moForm" label-width="130px">
        <el-form-item prop="ban" label="是否通过" v-if="item.applyStatus == -1">
          <el-switch
            style="display: block; padding-top: 5px"
            v-model="isPass"
            active-color="#13ce66"
            inactive-color="#ff4949"
            active-text="通过"
            inactive-text="拒绝"
            :active-value="0"
            :inactive-value="1"
          >
          </el-switch>
        </el-form-item>
        <el-form-item
          prop="auth.refusalReaso"
          label="拒绝原因"
          v-if="isPass == 1"
        >
          <el-input
            type="textarea"
            :autosize="{ minRows: 6, maxRows: 12 }"
            placeholder="请输入拒绝原因"
            v-model.trim="item.auth.refusalReason"
          ></el-input>
        </el-form-item>
        <el-form-item prop="jifen" label="积分">
          <el-input
            v-model.trim="item.jifen"
            placeholder="请输入积分"
          ></el-input>
        </el-form-item>
        <el-form-item prop="jifen" label="余额">
          <el-input
            v-model.trim="item.balance"
            placeholder="请输入余额"
          ></el-input>
        </el-form-item>
        <el-form-item prop="ban" label="封禁状态">
          <el-switch
            style="display: block; padding-top: 5px"
            v-model="item.ban"
            active-color="#13ce66"
            inactive-color="#ff4949"
            active-text="解封"
            inactive-text="禁封"
            :active-value="0"
            :inactive-value="1"
          >
          </el-switch>
        </el-form-item>
        <el-form-item prop="banTime" label="封禁结束时间" v-if="item.ban != 0">
          <el-date-picker
            v-model="item.banTime"
            type="datetime"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="选择日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item prop="banReason" label="禁封原因" v-if="item.ban != 0">
          <el-input
            type="textarea"
            :autosize="{ minRows: 6, maxRows: 12 }"
            placeholder="请输入禁封原因"
            v-model.trim="item.banReason"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleDoSubmit">保存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  getList,
  del,
  getSchoolList,
  getCardList,
  edit,
  addUserCard,
  subUserCard,
} from "./api/index";
import { filterSchool } from "../../../utils/common";
export default {
  data() {
    return {
      isPass: 0,
      cardList: [],
      cardId: "",
      currentPage: 1,
      total: 0,
      pager: 1,
      pageSize: 10,
      loadList: true,
      tableData: [],
      schoolList: [],
      dialogVisible: false,
      schoolId: "",
      status: "0",
      item: {},
      // getListFunc: Service.getList,
      // delItemFunc: Service.delItem,
      add_url: "/student/dummy-student/add",
      edit_url: (id) => {
        return `/student/dummy-student/${id}/edit`;
      },
    };
  },
  computed: {},
  async created() {
    await this.refresh_data();
    await this.selectChange();
    this.getCardList();
  },
  methods: {
    async addUserCard(cardId, userId) {
      if (cardId == "") return this.$message("请选择置顶卡");
      this.loadList = true;
      const res = await addUserCard(cardId, userId);
      if (res.code == 1) await this.selectChange();
      else this.$message.error(res.msg);
      this.item = this.tableData.find((i) => i.id == this.item.id);
      this.loadList = false;
    },
    async subUserCard(cardId, userId) {
      this.loadList = true;
      const res = await subUserCard(cardId, userId);
      if (res.code == 1) await this.selectChange();
      else this.$message.error(res.msg);
      this.item = this.tableData.find((i) => i.id == this.item.id);
      this.loadList = false;
    },
    findSchool(id) {
      console.log(id, "----");
      const obj = this.schoolList.find((i) => i.id === id);
      return obj ? obj : { name: "" };
    },
    // 查询
    async selectChange() {
      this.loadList = true;
      const res = await getList(this.currentPage, this.status, this.schoolId);
      if (res.code === 1) {
        this.tableData = res.data.records;
        this.total = res.data.total;
        this.currentPage = res.data.current;
      } else this.currentPage = 1;
      this.loadList = false;
    },
    // 获取院校列表
    refresh_data() {
      getSchoolList()
        .then((data) => {
          console.log(data, "=====");
          if (data.code === 1) {
            this.schoolList = filterSchool(data.data);
          } else {
            this.$message.error(data.description);
          }
          this.loadList = false;
        })
        .catch((err) => {
          console.log(err);
          this.loadList = false;
        });
    },
    // 获取置顶卡列表
    getCardList() {
      getCardList()
        .then((data) => {
          console.log(data, "=====");
          if (data.code === 1) {
            this.cardList = data.data;
          } else {
            this.$message.error(data.msg);
          }
          this.loadList = false;
        })
        .catch((err) => {
          console.log(err);
          this.loadList = false;
        });
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.selectChange();
    },
    handleCurrentChange(val) {
      console.log(val);
      this.currentPage = val;
      this.selectChange();
    },
    edit(item) {
      if (item.fake == 1) this.$router.push(this.edit_url(item.id));
      else {
        console.log(item);
        this.item = item;

        this.dialogVisible = true;
      }
    },
    async del(item) {
      this.$confirm("确认删除该条数据？", "提示", {
        confirmButtonText: "删除",
        cancelButtonText: "取消",
        type: "warning",
      }).then(async () => {
        this.loadList = true;
        const res = await del(item.id);
        if (res.code === 1) {
          this.selectChange();
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    // 修改
    async handleDoSubmit() {
      const item = {
        id: this.item.id,
        banTime: this.item.banTime, // 禁封到期时间
        refusalReason: this.item.auth.refusalReason, // 拒绝原因
        jifen: this.item.jifen, // 积分
        balance: this.item.balance, //余额
        ban: this.item.ban, // 封禁状态
        banReason: this.item.banReason, //禁封原因
      };
      const res = await edit({ ...item, isPass: this.isPass });
      console.log(res, "====>");
      if (res.code === 1) {
        this.$message.success("修改成功!");
        await this.selectChange();
        this.dialogVisible = false;
      } else {
        this.$message.error(res.msg);
      }
    },
  },
};
</script>
<style scoped>
</style>
